import React, { Component } from 'react'
import Comment from './components/Comment'
import Home from './components/Home'
import Search from './components/Search'

class App extends Component {
  state = {
    currentUrl: '',
  }

  componentDidMount() {
    const handleHashChange = () => {
      console.log(window.location.hash)
      this.setState({
        currentUrl: window.location.hash.slice(1),
      })
    }
    handleHashChange()
    window.addEventListener('hashchange', handleHashChange)
  }
  render() {
    const { currentUrl } = this.state
    return (
      <div>
        <h3>我是app组件</h3>
        <a href="#/home">首页</a>
        <a href="#/comment">评论</a>
        <a href="#/search">搜索</a>
        {currentUrl === '/home' && <Home></Home>}
        {currentUrl === '/comment' && <Comment></Comment>}
        {currentUrl === '/search' && <Search></Search>}
      </div>
    )
  }
}

export default App
